<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilterForm"/>
    <el-table
      height="650"
      border
      :data="tableData.list" v-loading="loading" element-loading-text="加载中...">
      <el-table-column align="center" label="注册时间" width="180" fixed="left">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="代理账号" width="120" align="center" prop="username" fixed="left">
        <template slot-scope="{row}">
          {{row.username}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" width="120" align="center">
      </el-table-column>
      <el-table-column label="上级代理" prop="parentName" width="120" align="center">
      </el-table-column>
      <el-table-column label="手机号码" width="120" align="center">
        <template slot-scope="{row}">
          <div>{{formatPhoneEmail(row.telephone)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="120" align="center">
        <template slot-scope="{row}">
          <div>{{formatPhoneEmail(row.email)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="注册网址" prop="registerUrl" width="120" align="center">
      </el-table-column>
      <el-table-column label="注册端" prop="deviceId" width="120" align="center">
        <template slot-scope="{row}">
          {{row.clientType | toConverter('DEVICE_TYPE')}}
        </template>
      </el-table-column>
      <!--<el-table-column label="申请时间" width="180" align="center">-->
      <!--<template slot-scope="{row}">-->
      <!--{{row.createTime | toTime}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="注册IP" prop="ip" width="120" align="center">
      </el-table-column>
      <el-table-column label="一审" align="center">
        <el-table-column label="状态" prop="auditFirStatus" width="120" align="center">
          <template slot-scope="{row}">
            <el-button size="mini" type="warning" v-if="row.status === 0 && roleCheck('first-audit')"
                       @click.native="showAuditDialog(row,1)">待审核
            </el-button>
            <el-button size="mini" type="info" v-else-if="row.status === 2" @click.native="showAuditDialog(row,1)">
              审核未通过
            </el-button>
            <el-button size="mini" type="success" v-else @click.native="showAuditDialog(row,1)">审核通过</el-button>
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="firstApprover" width="120" align="center">
        </el-table-column>
        <el-table-column label="时间" prop="firstTime" width="180" align="center">
          <template slot-scope="{row}">
            {{row.firstTime | toTime}}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="二审" align="center">
        <el-table-column label="状态" width="120" align="center">
          <template slot-scope="{row}" v-if="row.status === 1 || row.status>2">
            <el-button size="mini" type="warning" v-if="row.status === 1 && roleCheck('second-audit')"
                       @click.native="showAuditDialog(row,2)">待审核
            </el-button>
            <el-button size="mini" type="info" v-else-if="row.status === 4" @click.native="showAuditDialog(row,2)">
              审核未通过
            </el-button>
            <el-button size="mini" type="success" v-else-if="row.status === 3" @click.native="showAuditDialog(row,2)">
              审核通过
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="secondApprover" width="120" align="center">
        </el-table-column>
        <el-table-column label="时间" prop="secondTime" width="180" align="center">
          <template slot-scope="{row}">
            {{ row.secondTime | toTime}}
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <audit-dialog
      :id="dialogProps.id"
      :audit-step="auditStep"
      :row-data="dialogProps"
      v-if="dialogName === staticDialogName"
      v-model="dialogVisible"
      @submit="submitFinished"/>
    <div v-transfer-dom="'.app-main'">
      <custom-dialog
        v-if="dialogName === staticDialogName2"
        :visible="dialogVisible"
        returnButtonName="返回"
        :callback="resetCustomDialog">
        <div slot="title">{{viewTitle}}</div>
        <agency-detail
          v-if="dialogName === staticDialogName2"/>
      </custom-dialog>
    </div>
  </div>
</template>


<script>
  import {getAgencyAuditList} from '@/services/api/agency';
  import FormFilter from "./formFilter";
  import AuditDialog from "./auditDialog";
  import {grid, dialog} from '@/build'
  import AgencyDetail from "@/views/agency/detail/index";
  import CustomDialog from "@/components/customDialog/index";

  export default {
    name: "agency-audit",
    components: {CustomDialog, AgencyDetail, AuditDialog, FormFilter},
    mixins: [grid, dialog],
    data() {
      return {
        tableData: {},
        auditStep: 0,
        rowData: {},
        auditDialogVisible: false,
        filters: {
          size: 20,
          page: 1,
          startTime: moment().format('YYYY-MM-DD 00:00:00'),
          endTime: moment().format('YYYY-MM-DD 23:59:59'),
        },
        viewTitle: '',
        staticDialogName: 'audit-dialog',
        staticDialogName2: 'agency-detail',
        filterDateType: false,
      }
    },
    methods: {
      showAuditDialog(row, step) {
        this.rowData = row
        this.auditStep = step
        this.openDialog({props: row, dialogName: this.staticDialogName})
      },
      // 显示查看账号详情
      handleViewDetail(row) {
        this.openDialog({props: row, dialogName: this.staticDialogName2})
        window.scrollTo(0, 0)
        this.viewTitle = '代理名称：' + row.name
        this.$store.commit(types.SET_MEMBER_ID, row.userId)
        this.$store.commit(types.SET_MEMBER_INFO, row)
      },
      resetCustomDialog() {
        this.$store.commit(types.SET_MEMBER_ID, 0)
        this.closeDialog()
      },
      formatPhoneEmail(val){
        let res = '';
        if(val && val != '') {
          const phoneShowPartial =  this.roleCheck('phone-show-partial');
          const phoneShowAll = this.roleCheck('phone-show-all');
          const emailShowPartial = this.roleCheck('email-show-partial');
          const emailShowAll = this.roleCheck('email-show-all');
          if(val.indexOf('@') > -1){
            res = _.formatUserPhoneEmail(val,emailShowPartial,emailShowAll);
          }else{
            if(val.length > 3){
              res = _.formatUserPhoneEmail(val,phoneShowPartial,phoneShowAll);
            }else{
              res = val;
            }
          }
        }
        return res;
      }
    },
    mounted() {
      this.bindGet(getAgencyAuditList, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });
      this.getAll()
    }
  }
</script>

<style scoped>

</style>
